<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-1 JS方法实现下拉菜单显示和隐藏...</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #nav {
            background: #eeee;
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }

        ul li {
            list-style: none;
            float: left;
            /*width: 90px;*/ /*  固定宽度 字数多以后 会换行 */
            /*   padding: 0 10px; *//* 解决方案 不给固定宽度 给边距*/

            line-height: 40px; /*垂直居中*/
            text-align: center; /* 水平居中 */

            position: relative;
        }

        /**/
        a {
            text-decoration: none;
            color: black;
            padding: 0 10px;
        }

        a:hover {
            color: #fff;
            background: red;
            display: block;
        }

        ul li ul li {
            /*1 取消浮动  */
            float: none;
            background: #eee;
            margin-top: 2px;
        }

        ul li ul {
            /* 相对于父级别进行绝对定位  防止二级菜单影响 到1级菜单的宽度 */
            position: absolute;
            left: 0;
            top: 40px;
            display: none;

        }

        ul li ul li a:hover {
            background: #06f;
        }

        .clearfix {
            overflow: hidden;
            _zoom: 1;
        }
    </style>


</head>
<body>


<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">课程大厅</a>
            <ul>
                <!-- /*1 取消浮动  */ -->
                <li><a href="#">python</a></li>
                <li><a href="#">go</a></li>
                <li><a href="#">java</a></li>
            </ul>
        </li>
        <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">学习中心</a>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>

            </ul>
        </li>
        <li><a href="#">关于我们</a></li>
    </ul>

    <script type="text/javascript">
        function show(li) {
            // console.log(li, "lilili");
            let submenu = li.getElementsByTagName("ul")[0];
            //  console.log(submenu)
            submenu.style.display = "block";


        }

        function hide(li) {
            let submenu = li.getElementsByTagName("ul")[0];
            submenu.style.display = "none"


        }


    </script>
</div>

</body>
</html>